<template>
  <a-flex class="admin-layout">
    <div class="admin-aside">
      <a-menu class="border-none"
              mode="inline"
              :inlineIndent="12"
              @click="onChange"
              v-model:selectedKeys="selectedKey">
        <template v-for="(item, index) in adminMenuConfig">
          <a-menu-item-group v-if="item.children" :key="'sub-'+index" :title="item.title">
            <a-menu-item v-for="(child, index) in item.children" :key="index+child.path">
              <router-link :to="child.path"/>
              <component :is="child.icon" />
              <span>{{ child.title }}</span>
            </a-menu-item>
          </a-menu-item-group>
          <a-menu-item v-else :key="index">
            <router-link :to="item.path"/>
            <component :is="item.icon" />
            <span>{{ item.title }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </div>
    <div class="admin-content">
      <router-view></router-view>
    </div>
  </a-flex>
</template>
<script setup lang="ts">
import adminMenuConfig from "../../config/admin";
import { ref, computed} from 'vue'
import useStorage from '@/plugin/useStorage'

let selectedKey = ref([])

selectedKey.value = useStorage.getItem('admin-menu') || []
const onChange = (e:any) => {
  selectedKey.value = [e.key]
  useStorage.setItem('admin-menu',[e.key])
}
</script>

<style scoped>
  .admin-layout{
    padding: 24px;
  }
  .admin-aside{
    background-color: #fff;
    width: 200px;
    padding: 8px 8px 24px;
    border-radius: var(--radius);
    height: auto;
  }
  .admin-content{
    flex: 1;
    padding-left: 24px;
  }
</style>